<template>
  <div class="dashboard-editor-container">
    <div class="flex flex-row flex-wrap top-box">
      <div class="card flex flex-row bg1">
        <div class="ico-box"><img src="@/assets/baqsj/ico1.png" alt=""> </div>
        <div class="label ml15 line-height-50 font19">事件总数</div>
        <div class="number">{{ total }}</div>
      </div>
    </div>
    <el-card class="box-card">
      <el-form ref="listQuery" :model="listQuery" :inline="true">
        <el-form-item label="事件名称" prop="sjmc">
          <el-input v-model="listQuery.sjmc" placeholder="请输入事件名称" clearable size="small" style="width: 180px" @keyup.enter.native="getList" />
        </el-form-item>
        <el-form-item label="上报时间">
          <el-date-picker v-model="timeValue" clearable size="small" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="getList" />
        </el-form-item>
        <el-form-item label="发生时间">
          <el-date-picker v-model="timeFsValue" clearable size="small" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="getList" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
          <el-button v-permisaction="['baqsj:hz:report:export']" type="primary" icon="el-icon-download" size="small" @click="handleExportList">导出全部</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border :data="ticketList" :header-cell-style="{textAlign:'center'}" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="#" type="index" width="80" align="center" />
        <el-table-column label="上报示例ID" prop="sjfl" :show-overflow-tooltip="true" align="center" width="120">
          <template slot-scope="scope">
            <span>{{ !scope.row.event_id?"": scope.row.event_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="事件名称" prop="sjmc" :show-overflow-tooltip="true" align="center" min-width="150" />
        <el-table-column label="事件分类" prop="sjfl" :show-overflow-tooltip="true" align="center" width="170">
          <template slot-scope="scope">
            <span>{{ formatSjfl(scope.row.sjfl) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="事件属性" prop="sjsx" :show-overflow-tooltip="true" align="center" width="140">
          <template slot-scope="scope">
            <span>{{ formatSjsx(scope.row.sjsx) }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="事件范围" prop="sjfw" :show-overflow-tooltip="true" align="center" /> -->
        <el-table-column label="上报人" prop="tbr" :show-overflow-tooltip="true" align="center" width="110" />
        <el-table-column label="发生日期" align="center" prop="fsrq" width="140">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.fsrq,"{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="事件评分" prop="sjpf" :show-overflow-tooltip="true" align="center" width="140">
          <template slot-scope="scope">
            <span>{{ formatSjpf(scope.row.sjpf) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="事件流转状态" prop="status" :show-overflow-tooltip="true" align="center" width="140">
          <template slot-scope="scope">
            <span>{{ formatStatus(scope.row.status) }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="备案时间" align="center" prop="barq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.barq) }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="填报内容" prop="tbnr" :show-overflow-tooltip="true" align="center" min-width="140" /> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row)">上报详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <el-dialog title="上报详情" :visible.sync="open" width="1250px" top="50px">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="事件名称：" prop="sjmc">
              <div class="input-pre">{{ currentDetail.sjmc }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件属性：" prop="sjsx" label-width="120px">
              <div class="input-pre">{{ formatSjsx(currentDetail.sjsx) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件分类：" prop="sjfl" label-width="120px">
              <div class="input-pre">{{ formatSjfl(currentDetail.sjfl) }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="事件评分：" prop="sjpf" label-width="120px">
              <div class="input-pre">{{ formatSjpf(currentDetail.sjpf) }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left" />
        <el-row class="mt20">
          <el-col :span="6">
            <el-form-item label="上报人：" prop="tbr">
              <div class="input-pre">{{ currentDetail.tbr }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工 号：" prop="tbr" label-width="120px">
              <div class="input-pre">{{ currentDetail.tbrgh }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发生日期：" prop="fsrq" label-width="120px">
              <div class="input-pre">{{ parseTime(currentDetail.fsrq,"{y}-{m}-{d}") }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备案时间：" prop="barq" label-width="120px">
              <div class="input-pre">{{ parseTime(currentDetail.barq) }}</div>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="患者姓名：" prop="tbr">
              <div class="input-pre">{{ currentDetail.patientName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="住院号：" prop="tbr" label-width="120px">
              <div class="input-pre">{{ currentDetail.pi }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="病区：" prop="fsrq" label-width="120px">
              <div class="input-pre">{{ currentDetail.wardName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入院时间：" prop="barq" label-width="120px">
              <div class="input-pre">{{ parseTime(currentDetail.ryTime) }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="护理级别：" prop="fsrq">
              <div class="input-pre">{{ currentDetail.nursingLevel }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="特殊护理：" prop="barq" label-width="120px">
              <div class="input-pre">{{ currentDetail.specialCare }}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="诊断：" prop="fsrq">
              <div class="input-pre">{{ currentDetail.diagnosis }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用药情况：" prop="barq" label-width="120px">
              <div class="input-pre">{{ currentDetail.drug }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left" />
        <el-row>
          <el-col :span="24">
            <div class="mb10 pl10">事件简述：</div>
            <el-form-item label="" prop="tbnr" label-width="0px">
              <div class="input-pre pt10 pb10">{{ currentDetail.tbnr }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="mb10 pl10">造成影响：</div>
            <el-form-item label="" prop="tbnr" label-width="0px">
              <div class="input-pre pt10 pb10">{{ currentDetail.affect }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="mb10 pl10">原因分析：</div>
            <el-form-item label="" prop="tbnr" label-width="0px">
              <div class="input-pre pt10 pb10">{{ currentDetail.cause }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="mb10 pl10">整改措施：</div>
            <el-form-item label="" prop="tbnr" label-width="0px">
              <div class="input-pre pt10 pb10">{{ currentDetail.measures }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDetail">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Message, Loading } from 'element-ui'
import { hzList } from '@/api/baqsj/analyse'
import { formatJson } from '@/utils'
export default {
  name: 'BaqsjHzList',
  components: {},
  data() {
    return {
      timeValue: '',
      timeFsValue: '',
      open: false,
      currentDetail: {},
      excelLoading: false,
      loadingFull: null,
      recallDisabled: false,
      users: [],
      nodeList: [],
      nsVisible: false,
      dialogVisible: false,
      queryParams: {},
      total: 0,
      loading: false,
      ticketList: [],
      ywblfyList: [],
      ylqxList: [],
      currentNs: [],
      listQuery: {
        sjmc: '',
        page: 1,
        per_page: 10
      },
      downloadLoading: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async handleExportList() {
      this.downloadLoading = true
      const _this = this
      const exportParams = {
        pageIndex: 1,
        pageSize: 9999,
        startTime: '',
        startFsTime: '',
        endTime: '',
        endFsTime: '',
        sjmc: ''
      }
      if (
        this.timeValue === null ||
          this.timeValue === undefined ||
          this.timeValue === ''
      ) {
        exportParams.startTime = ''
        exportParams.endTime = ''
      } else {
        exportParams.startTime = this.parseTime(this.timeValue[0])
        exportParams.endTime = this.parseTime(this.timeValue[1])
      }

      if (
        this.timeFsValue === null ||
          this.timeFsValue === undefined ||
          this.timeFsValue === ''
      ) {
        exportParams.startFsTime = ''
        exportParams.endFsTime = ''
      } else {
        exportParams.startFsTime = this.parseTime(this.timeFsValue[0])
        exportParams.endFsTime = this.parseTime(this.timeFsValue[1])
      }

      exportParams.sjmc = this.listQuery.sjmc
      const ticketList = await hzList(exportParams)
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '事件编号',
          '事件名称',
          '事件分类',
          '事件属性',
          '发生日期',
          '上报人',
          '上报科室',
          '上报工号',
          '发生院区',
          '发生病区',
          '发生地点',
          '事件经过(详细信息)',
          '严重程度',
          '发生频率',
          'SAC评分',
          '申康上传状态',
          '流转状态',
          '上报时间'
        ]
        const filterVal = [
          'index',
          'sjmc',
          'sjfl',
          'sjsx',
          'fsrq',
          'tbr',
          'wardName',
          'tbrgh',
          'hospital',
          'wardName',
          'wardName',
          'tbnr',
          'yzcd',
          'fspl',
          'sjpf',
          'sk_status',
          'state',
          'barq'
        ]

        const listData = ticketList.data.list
        for (let i = 0; i < listData.length; i++) {
          listData[i].index = i + 1
          listData[i].hospital = '徐汇院区'
          listData[i].sk_status = '已上传'
          listData[i].yzcd = '--'
          listData[i].fspl = '--'
          listData[i].state = '--'
          listData[i].sjfl = this.formatSjfl(listData[i].sjfl)
          listData[i].sjsx = this.formatSjsx(listData[i].sjsx)
          // listData[i].sjpf = this.formatSjpf(listData[i].sjpf);
          listData[i].fsrq = this.parseTime(listData[i].fsrq, '{y}-{m}-{d}')
          listData[i].barq = this.parseTime(listData[i].barq)
        }
        const data = formatJson(filterVal, listData)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '不安全事件-历史上报数据',
          autoWidth: true, // Optional
          bookType: 'xlsx' // Optional
        })
        this.downloadLoading = false
      })
    },
    formatStatus(status) {
      if (status == 1) {
        return '登记'
      } else if (status == 2) {
        return '提交'
      } else if (status == 3) {
        return '整改'
      } else if (status == 4) {
        return '已跟踪'
      } else if (status == 9) {
        return '删除'
      }
    },
    formatSjfl(val) {
      if (val == '01') {
        return '医疗处置相关'
      } else if (val == '02') {
        return '手术（有创操作）相关'
      } else if (val == '03') {
        return '药物相关'
      } else if (val == '04') {
        return '仪器设备器械耗材相关'
      } else if (val == '05') {
        return '院感相关'
      } else if (val == '06') {
        return '输血相关'
      } else if (val == '07') {
        return '意外事件'
      } else if (val == '08') {
        return '防保相关'
      } else if (val == '09') {
        return '行政相关'
      } else if (val == '10') {
        return '其他'
      } else {
        return ''
      }
    },
    formatSjsx(val) {
      if (val == '0') {
        return '实际发生'
      } else if (val == '1') {
        return '隐患临差'
      } else {
        return ''
      }
    },
    formatSjpf(val) {
      if (val == '1') {
        return '极度危险事件'
      } else if (val == '2') {
        return '高度危险事件'
      } else if (val == '3') {
        return '中度危险事件'
      } else if (val == '4') {
        return '低度危险事件'
      } else {
        return ''
      }
    },
    resetQuery() {
      this.timeValue = ''
      this.resetForm('listQuery')
      this.getList()
    },

    closeDetail() {
      this.open = false
      this.currentDetail = {}
    },

    getList() {
      this.loading = true
      if (
        this.timeValue === null ||
        this.timeValue === undefined ||
        this.timeValue === ''
      ) {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      } else {
        this.listQuery.startTime = this.parseTime(this.timeValue[0])
        this.listQuery.endTime = this.parseTime(this.timeValue[1])
      }

      if (
        this.timeFsValue === null ||
          this.timeFsValue === undefined ||
          this.timeFsValue === ''
      ) {
        this.listQuery.startFsTime = ''
        this.listQuery.endFsTime = ''
      } else {
        this.listQuery.startFsTime = this.parseTime(this.timeFsValue[0])
        this.listQuery.endFsTime = this.parseTime(this.timeFsValue[1])
      }

      this.listQuery.pageIndex = this.queryParams.pageIndex
      this.listQuery.pageSize = this.queryParams.pageSize
      hzList(this.listQuery).then(response => {
        this.ticketList = response.data.list
        this.queryParams.pageIndex = response.data.pageIndex
        this.queryParams.pageSize = response.data.pageSize
        this.total = response.data.count
        this.loading = false
      })
    },

    handleView(row) {
      this.currentDetail = row
      this.open = true
    },
    handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          recyclingWorkOrder(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handleSelectionChange() {}
  }
}

</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .bg1 {
    background: url("~@/assets/baqsj/bg1.png") no-repeat 100%;
    background-size: cover;
  }

  .bg2 {
    background: url("~@/assets/baqsj/bg2.png") no-repeat 100%;
    background-size: cover;
  }

  .bg3 {
    background: url("~@/assets/baqsj/bg3.png") no-repeat 100%;
    background-size: cover;
  }

  .card {
    width: 357px;
    height: 128px;
    margin-right: 20px;
    margin-bottom: 10px;
    padding: 20px;
    border-radius: 10px;
    color: #000;
    position: relative;
    cursor: pointer;

    .ico-box {
      width: 50px;
      height: 50px;
      background: #fff;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 30px;
        height: 32px;
      }
    }

    .number {
      color: #263238;
      font-size: 36px;
      font-weight: 500;
      margin-top: 16px;
      flex: 1;
      text-align: center;
    }

    .label {
      font-size: 20px;
      color: #111;
    }

  }
}

::v-deep .el-tabs__item {
  padding-left: 16px !important;
  height: 50px;
  line-height: 50px;
}

::v-deep .el-form-item {
  margin-bottom: 15px;
}

.input-pre {
  background: #efefef;
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  padding: 0px 10px;
}

</style>
